<template>
  <view class="Home">
    <view class="bgc">
      <view class="backgound"></view>
      <view class="backgound2"></view>
    </view>
    <view class="addMoney">

      <view class="addMoneyTittle">
        开通时长
      </view>

      <view class="moneyLaut">
        <view class="money" v-for="(item,index) in money" @click="addmoneyValue(index)"
              :class="{'active':selectedIndex === index}">
          {{item.money}}
        </view>
      </view>
      <view class="selfaddmoney" :class="{'selfaddmoney1':isActive}">
        <text>选择开通时长:</text> <input @focus="isActive = true" @blur="isActive = false" type="text"
                                          :disabled="true"  v-model="addmoney" class="selfinput">
      </view>
      <view class="info01">
        <view class="index01" @click="onclick()">
          <view class="">
            <view class="text01">我的优惠券</view>
            <view class="border"></view>
          </view>
          <image src="@/static/优惠券.png" mode="" class="image01"></image>
        </view>
      </view>
    </view>

    <view class="tcpay">
      <view class="btnlist">
        <view class="choose-item" v-for="(item,index) in list">
          <image class="img1" :src="item.url" mode=""></image>
          {{ item.name }}
        </view>
      </view>
      <view class="btn">
        <text style="padding-left: 30rpx;">待支付</text>
        <text style="color:#578afd;">{{parseFloat(real).toFixed(2)}}</text>
        <view class="pay" @click="pay()">去支付</view>
      </view>
    </view>
  </view>
</template>


<script>
import {
} from '@/common/api.js'

export default {
  data() {
    return {
      show: false,
      show1: false,
      showOverlay: false, // 控制overlay显示与否的变量
      appointmentStatus: true, // 假设初始状态为预约失败
      selectedOldMan: 0,
      selectedIndex: null, // 用于存储当前选中的元素索引
      countdown: 0,
      isCountingDown: false,
      inforList: [{
        name: "吴海军",
        phon: "135 2589 3657",
        idNumber: "430525199401053654",
        identifier: "2358697454"

      }],
      money: [{
        real: '29.9',
        money: '一个月(31天)',
        value: '一个月'
      }, {
        real: '69.9',
        money: '一季度(93天)',
        value: '一季度'
      },
        //   {
        //   real: '129.9',
        //   money: '半年(183天)',
        //   value: '半年'
        // },
        {
          real: '239.9',
          money: '一年(365天)',
          value: '一年'
        }
        // , {
        //   real: '469.9',
        //   money: '两年(730天)',
        //   value: '两年'
        // }, {
        //   real: '669.9',
        //   money: '三年(1095天)',
        //   value: '三年'
        // }
      ],
      infor: {},
      form: {},
      phone: '',
      companyId: '',
      code: '',
      real: '29.9',
      addmoney: '一个月',
      isActive: false,
      list: [{
        name: "微信支付",
        url: '/static/微信支付.png'
      }
      ],
      styles: {
        color: '#2979FF',
        borderColor: '#2979FF'
      },
      placeholderStyle: "color:#2979FF;font-size:14px",
    }
  },
  computed: {
    sendButtonText() {
      return this.isCountingDown ? `${this.countdown} 秒后重试` : '发送验证码';
    },
  },
  onLoad() {
    this.infor = uni.getStorageSync('infor');
    this.form = uni.getStorageSync('infor');
  },
  methods: {
    input(e) {
      console.log('输入内容：', e);
    },
    input2(e) {
      console.log('输入内容：', e);
    },
    input3(e) {
      console.log('输入内容：', e);
    },
    fsdx() {
      this.isCountingDown = true;
      this.countdown = 60;

      this.startCountdown();
    },
    startCountdown() {
      const countdownInterval = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(countdownInterval);
          this.isCountingDown = false;
          this.countdown = 0;
          return;
        }
        this.countdown -= 1;
      }, 1000);
    },
    onclick() {
      uni.navigateTo({
        url: '/subPackage/Function/Price/YHQ'
      })
    },
    addmoneyValue(index) {
      this.selectedIndex = index; // 设置当前选中的索引
      this.addmoney = this.money[index].value;
      this.real = this.money[index].real;
      uni.showToast({
        title: '已选择' + this.money[index].value,
        icon: 'none'
      })
    }
  },
}
</script>


<style>
.tcpay{
  margin-top: 90%;
}
.pay {
  width: 250rpx;
  height: 100%;
  background-color: #578afd;
  color: white;
  text-align: center;
}
.btn {
  margin-bottom: 50rpx;
  margin-top: 3%;
  width: 100%;
  height: 80rpx;
  //border-top: 1rpx solid black;
  border-bottom: 1rpx solid black;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.img1 {
  width: 50rpx;
  height: 50rpx;
  // line-height: 50rpx;
}
.btnlist {
  width: 96%;
  margin: 0 auto;
  border: 1rpx solid black;
  border-radius: 10rpx;

}
.choose-item {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  // background-color: #F7F7F7;
  //background-color: white;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}
.Home {
  height: 100%;
  width: 100%;
}

.bgc {
  display: flex;
}

.backgound {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#FFE2D1, #FDF8F2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -9999;
}

.backgound2 {
  width: 100%;
  //height: 100%;
  background-color: #f0f0f0;
  position: absolute;
  top: 100%;
  z-index: -9999;
}
.img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.addMoney {
  //margin-top: 20rpx;
  height: 100%;
  padding: 30rpx 20rpx 54rpx 22rpx;
  //background: #FFFFFF;
  //box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.money {
  width: 202rpx;
  height: 124rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 1rpx solid #999999;
  text-align: center;
  line-height: 124rpx;
  margin-bottom: 20rpx;
}

.selfaddmoney1 {
  display: flex;
  align-items: center;
  margin-top: 28rpx;
  margin-bottom: 36rpx;
  width: 650rpx;
  height: 76rpx;
  background: #F6F5FF;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 2rpx solid #5448FF;
  text-align: center;
  line-height: 76rpx;
  padding-left: 32rpx;
  box-sizing: border-box;
}

.selfaddmoney {
  display: flex;
  align-items: center;
  margin-top: 28rpx;
  margin-bottom: 36rpx;
  width: 650rpx;
  height: 76rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 2rpx solid #999999;
  text-align: center;
  line-height: 76rpx;
  padding-left: 32rpx;
  box-sizing: border-box;
}

.selfinput {
  width: 400rpx;
  text-align: right;
}

.selfinputtext {
  font-size: 20rpx;
  margin-top: 8rpx;
}

.addMoneyTittle {
  font-size: 32rpx;
  color: #5448FF;
}

.moneyLaut {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.info01 {
  display: flex;
  //margin: 0 30rpx;
  justify-content: space-between;
  margin-top: 25rpx;
  /* flex-wrap: wrap; */
}

.index01 {
  width: 270rpx;
  height: 56rpx;
  padding: 30rpx;
  border-radius: 30rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.image01 {
  width: 54rpx;
  height: 56rpx;
  margin-top: 20rpx;
}

.text01 {
  font-size: 30rpx;
  /* margin-left: 25rpx; */
  font-weight: bold;
}

.border {
  width: 40rpx;
  height: 26rpx;
  border-bottom: 6rpx solid #F9363A;
  border-radius: 2px;
}
.send-code-button {
  margin-left: 8px; /* 添加适当的左侧边距，使按钮与验证码输入框之间有一定间距 */
  box-shadow: none !important;
}
</style>
